<template>
  <div>
    <el-row type="flex" class="row-bg" align="middle">
      <el-col :span="4">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: mutationsLink.url }">{{
            mutationsLink.title
          }}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col :span="18">
        <span v-if="weather.status == 1">
          {{ weather.forecasts[0].province }} -
          {{ weather.forecasts[0].city }}
          今天的天气为：{{
            weather.forecasts[0].casts[0].dayweather
          }}
          明天的天气为：{{ weather.forecasts[0].casts[1].dayweather }}
        </span>
        <span v-else>
          天气状态获取失败
        </span>
      </el-col>
      <el-col :span="2">
        {{ $store.state.userStore.userName }} /
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>设置</el-dropdown-item>
            <el-dropdown-item @click.native="logout">登出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      weather: []
    };
  },
  computed: {
    mutationsLink() {
      return this.$store.state.breadcrumb;
    }
  },
  methods: {
    logout() {
      this.$store.commit("clearTages");
      this.$store.commit("clearMutations");
      this.$store.commit("logout");
      this.$router.push("/");
      //退出时必须刷新一下页面，否则验证码加载不了图片
      location.reload();
    }
  },
  mounted() {
    this.$axios
      .get(
        "https://restapi.amap.com/v3/weather/weatherInfo?city=431000&key=2f166892af1383ab4aa3f918d7830b45&extensions=all"
      )
      .then(result => {
        this.weather = result.data;
        console.log(result);
      })
      .catch(err => {
        this.$message.error("获取天气异常：" + err);
      });
  }
};
</script>

<style scoped></style>
